<template>
  <div id="tmpl">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media" v-for="(item,index) in list" :key="index">
            <router-link v-bind="{to:'/news/newsinfo/'+item.id}">
                <img class="mui-media-object mui-pull-left" :src="item.img_url">
                <div class="mui-media-body">
                    {{item.title}}
                    <p class='mui-ellipsis' v-text="item.zhaiyao">
                        <div class="ft">
                            <span>发表时间:{{item.add_time | datefmt("YYYY-MM-DD hh:mm:ss")}}</span>
                            <span>{{item.click}}</span>
                        </div>
                    </p>
                </div>
            </router-link>
		</li>
    </ul>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    this.getnews();
  },
  methods: {
    getnews() {
      //es6语法
      var url = this.$common.apidomain+"/api/getnewslist";
      this.$http.get(url).then(res => {
        //es6语法
        console.log(res);
        var data = res.body;
        if (data.status != 0) {
          Toast(data.message);
          return;
        }
        this.list = data.message;
      });
    }
  }
};
</script>
<style scoped>
/* #tml {
  margin-top: 40px;
} */
.mui-table-view img {
  width: 80px;
  height: 80px;
}
.mui-table-view .mui-media-object {
  max-width: 80px;
  line-height: 80px;
}
.ft{
    margin-top: 1.5em;
    font-size: 14px;
    color: #0094ff;
}
.ft span:last-of-type{
    margin-left: 80px;
}
</style>

